<extend name="Base/common" />
<block name="style">
<link rel="stylesheet" href="__STATIC__/jcrop/css/jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="__STATIC__/webuploader/webuploader.css" type="text/css" />
<style type="text/css">
.jcrop-holder > div > div ,.avatar-preview-container {
  border-radius: 50%;
}

.card > .avatar-preview-box{
	background:#eee;
}
.card:hover > .avatar-preview-box,
.card > .avatar-preview-box:active{
	background:#eee;
	filter: alpha(opacity=90);
	opacity: .9;
}
.avatar-preview-container{
  position:relative;
  float:none;
  width: 128px;
  height: 128px;
  overflow: hidden;
  margin-left:auto;
  margin-right:auto;
  margin-top:36px;
  margin-bottom:36px;
  border:5px solid #FFF;
}
.avatar-preview-container img{
 max-width: none;
}

.jcrop-img-box{
	background:none;
	margin:0px;
}

.jcrop-img-box .container{
	min-height:300px;
	padding:0px;
	margin-top:10px;
}
.jcrop-img-box .alert{
	margin:0px;
	position:relative;
	left:0px;
	top:0;
	z-index:10;
}
.jcrop-img-box span img{
	width:auto;
	height:auto;
}
.webuploader-pick,.webuploader-pick-hover{
	width:100%;
	height:100%;
	margin:0px;
	border-radius: 0px;
	background:none;
	max-width:none;
}
div[data-role=avatar_select_btn]{
	height:41px;
	overflow:hidden;
	margin-bottom:10px; 
	margin-top:10px;
	padding:0px;
}
div[data-role=avatar_submit_btn]{
	margin-bottom:10px; 
	margin-top:10px;
}
</style>
</block>
<block name="header">

<header>

  <div class="container text-center" style="padding-bottom:20px;">
    <h2>头像设置 </h2>
  </div>
  
</header>

</block>

<block name="body">

<div class="center-block col-md-12 cards cards-borderless">
      <div class="col-md-4 col-sm-6 col-lg-3 ">
          <div class="card">
            <span class=" media-wrapper avatar-preview-box">  
            <div class="avatar-preview-container" id="avatar-preview-container-{$UID}">       
            <img src="{:get_avatar(UID)}" />
            </div>   
            </span>
            <span href="###" class="card-heading">            
            <div class="col-md-12" style="padding:0px;padding-top:10px;"> 
               <div data-role="avatar_select_btn" id="upload_avatar_{$UID}" class="btn btn-lg btn-danger col-md-12 col-xs-6" >选择图片</div> 
               <div data-role="avatar_submit_btn" class="btn btn-lg btn-warning col-md-12 col-xs-6">提交头像</div>
            </div>
            </span>
          </div>
        </div>

     <div class="col-md-9 jcrop-img-box" >
         <div id="upload_avatar_{$UID}_alert" class="alert alert-lg alert-info">请选择图片 </div>
         <div class="container">
         <span id="crop_box_{$UID}"></span>
         </div>
     </div>
                 
</div>

</block>

<block name="script">
<script type="text/javascript" src="__STATIC__/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="__STATIC__/webuploader/webuploader.js"></script>
<script src="__STATIC__/jcrop/js/jquery.Jcrop.js"></script>
<script type="text/javascript">
	
$(function () {
	var msg=$.zui.messager;
	var msg_on=null;
	var crop=null;
	var jcrop_api=null;
	var boundx, boundy;
	var path;
	var pcnt=$('#avatar-preview-container-{$UID}'),xs = pcnt.width(),ys= pcnt.height();
	var uploader_{$UID}= WebUploader.create({
		// 选完文件后，是否自动上传。
		auto: true,
		// swf文件路径
		swf: 'Uploader.swf',
		// 文件接收服务端。
		server: "{:U('avatar',array('uid'=>UID,'session_id'=>session_id()))}",
		// 选择文件的按钮。可选。
		// 内部根据当前运行是创建，可能是input元素，也可能是flash.
		pick: '#upload_avatar_{$UID}',
		// 只允许选择图片文件。
		accept: {
			title: 'Images',
			extensions: 'gif,jpg,jpeg,bmp,png',
			mimeTypes: 'image/*'
		}
	});
	uploader_{$UID}.on('fileQueued', function (file) {
		msg_on=msg.warning('开始上传……',{placement:'center'});
		uploader_{$UID}.upload();
	});
	/*进度*/
	uploader_{$UID}.on('uploadProgress', function (file,percent) {
		show_alert(Math.ceil(percent*100)+'%',2);
	});
	/*上传成功*/
	uploader_{$UID}.on('uploadSuccess', function (file, ret) {
												  
		msg_on.hide();
		
		if (ret.status == 0) {
			msg.danger(ret.info,{placement:'center'});
			show_alert(ret.info,2);		
		} else {
			var src = ret.url || '__ROOT__' + ret.path;
			if(path!=src){
				
				path =src;
				src=src+'?t='+new Date().getTime();
				
				$(".jcrop-img-box .container").slideUp(300).fadeOut(1000,function(){
																				 
					$("#crop_box_{$UID}").html('');
					$("#crop_box_{$UID}").html('<img src="'+src+'">');
					$("#avatar-preview-container-{$UID}").html('<img src="'+src+'">');
					$("#crop_box_{$UID} img").load(function (){
						crop_init(src+'?t='+new Date().getTime());
						$(".jcrop-img-box .container").slideDown(300).fadeIn(1000);
					});
					
					show_alert('请剪裁图片',1);	
					
				});
				
			}else{
				msg.warning('你选择了同样的图片',{placement:'center'});
				show_alert('请剪裁图片',1);
			}
			//重置队列
			uploader_{$UID}.reset();
		}
	});
	
	/*出错*/
	uploader_{$UID}.on('uploadError', function (file,reason) {
		msg.danger(reason,{placement:'center'});
		show_alert(reason,2);									  
	});
	
	function crop_init(src){
		
	   $("#crop_box_{$UID} >img").Jcrop({
			aspectRatio: 1,
			onChange: updatePreview,
			onSelect: updatePreview,
			minSize: [10, 10],
			setSelect:[0, 0, 256, 256]
		}, function () {
			var bounds = this.getBounds();
			boundx = bounds[0];
			boundy = bounds[1];
			jcrop_api = this;
			crop = jcrop_api.tellScaled();
			updatePreview(crop);
		});
			
	}
	
	function updatePreview(c){
		crop=c;
		var rx = xs / c.w;
		var ry = ys / c.h;
		$("#avatar-preview-container-{$UID} >img").css({
			width: Math.round(rx * $("#crop_box_{$UID} >img").width()) + 'px',
			height: Math.round(ry * $("#crop_box_{$UID} >img").height()) + 'px',
			marginLeft: '-' + Math.round(rx * c.x) + 'px',
			marginTop: '-' + Math.round(ry * c.y) + 'px',
			display:'block'
		});
		
	}
	
	function show_alert(text,type){
		
		switch(type){
			case 0:
			   type="info";
			break;
			
			case 1:
				type="warning";
			break;
			
			case 2:
				type="danger";
			break;
			
			case 3:
				type="success";
			break;
			
		}
		
		$('#upload_avatar_{$UID}_alert').text(text).removeClass('alert-info alert-warning alert-danger alert-success').addClass('alert-'+type);
		
	}
	
	$(window).resize(function(){
							  
	   $(".webuploader-pick+div").width('100%');
	   
	   if(!!crop){
           jcrop_api.destroy();
		   crop_init(path);
	   }
	   
	});
    
	$('[data-role=avatar_submit_btn]').click(function(){
		//检查是否已经裁剪过
		if (!crop) {
			 msg.danger('请上传头像并裁剪',{placement:'center'});
			return;
		}
		else{
			var the_crop = crop.x / boundx + ',' + crop.y / boundy + ',' + crop.w / boundx + ',' + crop.h / boundy;
		}
		
		show_alert('正在剪裁图片……',2);	
		
		msg.warning('正在剪裁图片……',{placement:'center'});
		
		//提交到服务器
		var url = "{:U('avatar',array('uid'=>UID,'session_id'=>session_id()))}";
		$.post(url, {crop:the_crop,path:path,saveImgSize:'128,128'}, function (res) {
				 
				 if(res.status){
					 
					 msg.success(res.info,{placement:'center'});
				 
				 }else{
					 
					 msg.danger(res.info,{placement:'center'});
					 
				 }
				 
				 (!!crop)&&(jcrop_api.destroy());
				 $(".jcrop-img-box .container").slideUp(300).fadeOut(1000);
				 show_alert('还要做点什么？',3);		
				 crop=null;
		});

	})
})

</script>

</block>